<template>
  <div class="screen-item">
    <div ><VideoPlayer ref="VideoPlayer0"></VideoPlayer></div>
    <div ><VideoPlayer ref="VideoPlayer1"></VideoPlayer></div>
    <div ><VideoPlayer ref="VideoPlayer2"></VideoPlayer></div>
    <div ><VideoPlayer ref="VideoPlayer3"></VideoPlayer></div>
    <div ><VideoPlayer ref="VideoPlayer4"></VideoPlayer></div>
    <div ><VideoPlayer ref="VideoPlayer5"></VideoPlayer></div>

  </div>
</template>

<script>
import VideoPlayer from '@/components/JessibucaVideo.vue'

export default {
  components:{VideoPlayer},
  props:{

    flvUrl:{
      type:String,
      required:true
    }
  },
  beforeDestroy() {
    this.$refs.VideoPlayer0.destroy()
    this.$refs.VideoPlayer1.destroy()
    this.$refs.VideoPlayer2.destroy()
    this.$refs.VideoPlayer3.destroy()
    this.$refs.VideoPlayer4.destroy()
    this.$refs.VideoPlayer5.destroy()

  },
  methods:{
    play () {
      this.flvPlayer.play();
    },
  },
  watch:{
    flvUrl(newVal,oldVal){
     // newVal = 'http://192.168.25.203:8080/live/test.live.flv'
      let clickNum = this.clickNum

      console.log(clickNum)
      let historyItem = clickNum % 6
      console.log(historyItem)
      this.urlHistory[historyItem] = newVal
      if(historyItem == 0){
        this.$refs.VideoPlayer0.play(newVal)
      }else if (historyItem == 1){
        this.$refs.VideoPlayer1.play(newVal)
      }else if (historyItem == 3){
        this.$refs.VideoPlayer3.play(newVal)
      }else if (historyItem == 2){
        this.$refs.VideoPlayer2.play(newVal)
      }else if (historyItem == 4){
        this.$refs.VideoPlayer4.play(newVal)
      }else if (historyItem == 5){
        this.$refs.VideoPlayer5.play(newVal)
      }
      this.clickNum++
    }
  },
  data() {
    return {
      urlHistory:[],
      clickNum : 0
    };
  }
}
</script>
<style scoped>
.screen-item {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 定义三列，每列占据相同空间 */
  grid-template-rows: repeat(2, 300px); /* 定义三行，每行高度为 300px */
  grid-gap: 1px; /* 可选：定义网格项之间的间距 */
  width: 100%; /* 确保容器宽度为全屏 */
  height: calc(200px * 3 + 10px * 3); /* 总高度为两个视频高度加上两个间距 */
  overflow: auto; /* 如果容器高度超过视口，允许滚动 */
}

.screen-item > div {
  width: 100%; /* 确保每个网格项占据整列宽度 */
  height: 100%; /* 确保每个网格项占据整行高度 */
  /* 可选：添加其他样式，如边框、背景等 */
}

/* 假设 VideoPlayer 组件需要一些特定的样式 */
.screen-item > div VideoPlayer {
  width: 100%; /* 使得 VideoPlayer 填充其父容器 */
  height: 100%; /* 使得 VideoPlayer 填充其父容器的高度 */
}
</style>
